<template>
  <div class="login-container">

    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"
             label-position="left">
      <div class="title-container">
        <h3 class="title">登 录</h3>
      </div>

      <div style="display: flex;justify-content: space-between;margin-bottom: 24px;padding: 0 40px">
        <span :class="activeName == 'first' ? 'activeStyle' : '' " style="padding: 10px" @click="tabClick('first')">账号密码登录</span>
        <span :class="activeName == 'second' ? 'activeStyle' : '' " style="padding: 10px" @click="tabClick('second')">手机号登录</span>
      </div>
      <!--账号密码登录-->
      <div v-if="activeName == 'first'">
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            placeholder="账户"
            type="text"
            tabindex="1"
          >
            <i slot="prefix" class="el-input__icon el-icon-user"></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            :key="passwordType"
            v-model="loginForm.password"
            :type="passwordType"
            placeholder="密码"
            tabindex="2"
            @keyup.enter.native="handleLogin"
          >
            <i slot="prefix" class="el-input__icon el-icon-lock"></i>
          </el-input>
          <span class="show-pwd" @click="showPwd">
          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"/>
        </span>
        </el-form-item>
      </div>
      <!--手机号登录-->
      <div v-if="activeName == 'second'">
        <el-form-item prop="telephone">
          <el-input
            ref="telephone"
            v-model="loginForm.telephone"
            placeholder="手机号"
            name="telephone"
            type="text"
            tabindex="1"
          >
            <i slot="prefix" class="el-input__icon el-icon-mobile-phone"></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input
            ref="code"
            v-model="loginForm.code"
            placeholder="验证码"
            name="code"
            type="text"
            tabindex="1"
            style="width: 60%;"
          >
            <i slot="prefix" class="el-input__icon el-icon-message"></i>
          </el-input>
          <el-button plain style="position: absolute;right: 0px;top: 2px;" @click="getCode()">获取验证码</el-button>
        </el-form-item>
      </div>

      <div style="display: flex;justify-content: space-between;margin-bottom: 24px">
        <span><el-checkbox v-model="checked" style="padding-right: 10px"></el-checkbox>自动登录</span>
        <span class="colorBlue">忘记密码</span>
      </div>

      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;"
                 @click.native.prevent="handleLogin">确 定
      </el-button>

      <div style="display: flex;justify-content: space-between;margin-bottom: 24px">
        <span style="display: flex;align-items: center">
          其他方式登录
          <span class="iconfont icon-zhifubaozhifu" style="font-size: 28px;"></span>
          <span class="iconfont icon-taobao" style="font-size: 26px;"></span>
          <span class="iconfont icon-xinlangweibo" style="font-size: 26px;"></span>
        </span>
        <router-link class="colorBlue" tag="span" to="/register">注册账户</router-link>
      </div>

    </el-form>

  </div>
</template>
<script>
  import {validUsername} from '@/utils/validate'


  export default {
    name: 'Login',
    data() {
      const validateUsername = (rule, value, callback) => {
        if (value.length == 0) {
          callback(new Error('请输入用户名'))
        } else {
          callback()
        }
      }
      const validatePassword = (rule, value, callback) => {
        if (value.length < 6) {
          callback(new Error('请输入6位数以上的密码'))
        } else {
          callback()
        }
      }
      return {
        loginForm: {
          username: 'admin',
          password: '123456',
          telephone:"13212344321",
          code:"666666"
        },
        loginRules: {
          username: [{required: true, trigger: 'blur', validator: validateUsername}],
          password: [{required: true, trigger: 'blur', validator: validatePassword}],
          telephone: [
            {required: true, message: '请输入11位手机号码', trigger: 'blur'},
            {required: true, pattern:/^[0-9]{11}$/, message: '请输入11位手机号码', trigger: 'blur'},
          ],
          code: [
            {required: true, message: '请输入6位验证码', trigger: 'blur'},
            {pattern:  /^[0-9]{6}$/, message: '请输入6位验证码', trigger: 'blur'},
          ]
        },
        loading: false,
        passwordType: 'password',
        redirect: undefined,
        activeName: 'first',
        checked: true
      }
    },
    watch: {
      $route: {
        handler: function (route) {
          this.redirect = route.query && route.query.redirect
        },
        immediate: true
      }
    },
    methods: {
      //tab切换
      tabClick(e) {
        this.activeName = e;
        this.$refs['loginForm'].resetFields();
      },
      //获取验证码
      getCode(){
        if(this.loginForm.telephone.length != 11){
          this.$message('请输入11手机号码');
        }else{
          this.$message('调用获取验证码接口');
        }
      },
      //密码
      showPwd() {
        if (this.passwordType === 'password') {
          this.passwordType = ''
        } else {
          this.passwordType = 'password'
        }
        this.$nextTick(() => {
          this.$refs.password.focus()
        })
      },
      //账号密码登录
      handleLogin() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.loading = true;
            if(this.activeName == 'first'){
              this.$store.dispatch('user/login', this.loginForm).then(() => {
                this.$router.push({path: this.redirect || '/'})
                this.loading = false
              }).catch(() => {
                this.loading = false
              })
            }else{
              this.$message('手机号登录接口调用');
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
    }
  }
</script>
<style>
  .el-input--medium .el-input__inner {
    height: 40px;
    line-height: 40px;
  }
  .el-form-item {
    margin-bottom: 28px;
  }
</style>
<style lang="scss" scoped>
  $dark_gray: #889aa4;
  $light_gray: #eee;
  $blue:#1890ff;
  .iconfont {
    font-family: "iconfont" !important;
    font-style: normal;
    color: #ccc;
    padding-left: 8px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .iconfont:hover{
    color:  $blue;
  }

  .colorBlue{
    color: $blue;
  }
  .activeStyle {
    color: #1890ff;
    border-bottom: 2px solid #1890ff;
  }

  .activeHover:hover {
    color: #1890ff;
  }
  .login-container {
    min-height: 100%;
    width: 100%;
    background: #f0f2f5 url() no-repeat 50%;
    background-size: 100% 100%;
    overflow: hidden;
    font-size: 18px;

    .login-form {
      position: relative;
      width: 420px;
      max-width: 100%;
      padding: 160px 35px 0;
      margin: 0 auto;
      overflow: hidden;
    }


    .title-container {
      position: relative;

      .title {
        font-size: 26px;
        color: #000;
        margin: 0px auto 40px auto;
        text-align: center;
        font-weight: bold;
      }
    }

    .show-pwd {
      position: absolute;
      right: 10px;
      top: 2px;
      font-size: 16px;
      color: $dark_gray;
      cursor: pointer;
      user-select: none;
    }
  }
</style>
